<template>
	<view class="home-container">
		<NavBar />
		<!-- 小程序不支持 ref -->
		<TabBar :list="list" :active_index="active_index" @change="change_nav" />
		<ArticleList :label="list" :active_index="active_index" />
	</view>
</template>

<script>
	// uni-app 中，同名组件不需要手动 import 导入
	export default {
		data() {
			return {
				title: 'Hello',
				active_index: 0,
			}
		},
		computed: {
			list() {
				return [{
					name: '全部'
				}, ...this.$store.state.my_label]
			}
		},
		methods: {
			change_nav(index) {
				this.active_index = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		display: flex;
	}

	.home-container {
		width: 100%;
		@include flex(flex-start, column);
	}

	.article-list-container {
		width: 100%;
		flex: 1;
	}
</style>
